<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-Jquery对象和js对象的区别和转换</title>
    <!--引入官方js框架jquery-3.3.1.min.js-->
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="div1">标签体为div1...</div>
    <div id="div2">标签体为div2...</div>
    <script>
        /*js方式:
        //1.通过js方式获取名称为div的所有html元素对象
        var divs = document.getElementsByTagName("div");
        alert(divs.length);
        //使用js方式，对divs中所有div,让其标签体内容改为aaa
        for (var i=0;i<divs.length;i++){
            divs[i].innerHTML="aaa";

            /*下面将js对象转化为jq对象并调用对应jq中方法html()
            $(divs[i]).html("aaa);
            */

        }
        */

        //Jq方式
        //2.通过jq方式获取名称为div的所有html元素对象
        var divs1 = $("div");
        alert(divs1.length);
        //使用jq方式，对divs中所有div,让其标签体内容改为bbb,不需要遍历
        div1.html(bbb);//jq中html()既可获取标签体也可设置标签体
        /*
        * 下面将jq对象divs1转化为js对象，并调用js对象中元素属性innerHTML
        * divs1[0].innerHTML="ccc";
        * divs1.get(1).innerHTML="eee";
        * */

        /**
         * 1.JQuery对象在操作时，更加方便
         * 2.JQuery对象和js对象的方法不同(如innerHTML和html)
         * 3.两者相互交换
         *   *jq-->js
         *      格式:jq对象(索引) 或 jq对象.get(索引)
         *      例如:将jq对象divs1转化为js对象，并调用js对象中元素属性innerHTML
         *           divs1[0].innerHTML="ccc";
         *           divs1.get(1).innerHTML="eee";
         *   *js-->jq(常用，因为jq比较强大，封装很多方法)
         *      格式:$(js对象)
         *      例如:将js对象转化为jq对象并调用对应jq中方法,增强js对象功能
         *           $(divs[i]).html("aaa);
         */
    </script>
</body>
</html>